//图片预加载
//我们将插件写在局部的作用域中，其实就是为了使他和外部的内容互不干涉互不影响，但是js中是没有局部作用域的，我们一般使用闭包来模拟局部作用域
(function ($) {
    function PreLoad(imgs, options) {
        this.imgs = (typeof imgs === 'string' ? [imgs] : imgs);
        this.opts = $.extend({}, PreLoad.DEFAULTS, options);

        //加下划线只在内部使用，不提供外部调用
        if (this.opts.order==='ordered'){
            //有序预加载
            this._ordered();
        }else{
            //无序预加载
            this._unoredered();
        }
    }

    //默认参数
    PreLoad.DEFAULTS = {
        order:'unordered',
        each: null,//每一张图片加载完毕后执行
        all: null//所有图片加载完毕后执行
    }

    PreLoad.prototype._ordered=function(){//有序加载
        var opts=this.opts,
            imgs=this.imgs,
            len=imgs.length,
            count=0;

        load();

        //有序预加载
        function load(){
            var imgObj=new Image();
            $(imgObj).on("load error",function () {
                opts.each && opts.each(count);

                if (count>=len){
                    //所有图片已经加载完毕
                    opts.all && opts.all();
                }else{
                    load();
                }
                count++
            });

            imgObj.src=imgs[count];
        }
    }

    //面向对象这里的方法，都将它写在原型上，这样在每一次实例化的时候都可以使它保持一份
    PreLoad.prototype._unoredered = function () {//无序加载
        var imgs = this.imgs,
            opts = this.opts,
            count = 0,
            len = imgs.length;

        $.each(imgs, function (i, src) {
            if (typeof src != 'string') return;

            var imgObj = new Image();

            $(imgObj).on('load error', function () {
                //$progress.html(Math.round((count + 1) / len * 100) + '%');
                opts.each && opts.each(count);

                if (count >= len - 1) {
                    opts.all && opts.all();
                    // $('.loading').hide();
                    // document.title = '1/' + len;
                }

                count++;
            });

            imgObj.src = src;
        });
    };

    //如何将它变成插件呢，jQuery提供了两种方式，一个是附在 $.fn.extend;还有一种是直接跟在jQuery对象上面 $.extend 它的调用形式其实就是一个工具
    // $.fn.extend -> $('#img').preload()
    // $.extend -> $.preload();
    //我们这里很显然是不需要选择一个元素的，所以我们直接选择工具方法就可以

    $.extend({
        //名字preload
        preload: function (imgs, opts) {
            new PreLoad(imgs, opts);
        }
    })


})(jQuery);
